<template>
  <header style="top: 0; touch-action: pan-y" v-bind:class="[isRegionActive ? 'region-active' : 'region-inactive']">
    <div class="header-items">
      <a class="menu-link" style="touch-action: pan-y;"  @click="isMenuActive = !isMenuActive">
        <Icon type="navicon-round"></Icon>
      </a>
      <a id="home-link" href="#">
        <img src="../assets/htlogo.png" alt="HappyTeam">
      </a>
      <div class="header-rhs">
	  <!--
        <a id="change-region" class="change-region" @click="toggleRegion" style="touch-action: pan-y;">
          <span class="region-name">中国</span>
          <i class="fa fa-angle-up"></i>
          <span class="region-name">中文简体</span>
        </a>
        <i18n-setting></i18n-setting>
      -->
       <div class="user-login-reg-trigger" id="user-login-reg" v-show="!isLogin">
        <router-link to="/login">
          <span class="login-status-text" >登录／注册
          <Icon type="chevron-down"></Icon>
          </span>
        </router-link>
      </div>

      <div class="user-session-nav-trigger" id="user-session-nav"  v-show="isLogin"  @click="isProfileActive = !isProfileActive">
          <span class="avatar" height="32" width="32"><i class="fa fa-user-circle" /></span>
          <a class="user-name">{{username}}</a>
          <a class="down-tip"><i class="fa fa-angle-down"></i></a>
          <div id="user-session-nav-dropdown" class="user-session-nav-dropdown" v-show="isProfileActive">
          <router-link :to="{path: '/userprofile'}">
            <Icon type="person"></Icon>
            <span>个人资料</span>
          </router-link>
          <a class="session-logout"  href="#" title="Logout" @click="handleLogout()">
            <Icon type="log-out"></Icon>
            <span>退出</span>
          </a>
          </div>
        </div>
      </div>
    </div>
    <!-- nav menu -->
    <main-menu :active="isMenuActive"></main-menu>
  </header>
</template>

<script>
  import MainMenu from './MainMenu'
  import I18nSetting from './I18nSetting'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      I18nSetting,
      MainMenu
    },
    name: 'header-bar',
    data () {
      return {
        isRegionActive: false,
        isMenuActive: false,
        isProfileActive: false,
        isCartActive: false
      }
    },
    created () {
    },
    computed: {
      ...mapGetters([
        'username',
        'isLogin'
      ])
    },
    methods: {
      handleLogout () {
        this.$http.get('/logout').then((response) => {
          if (response.data.code === 200) {
            this.$store.dispatch('destroyUser')
            this.$router.replace({ path: '/login' })
          } else {
            this.$Message.error('退出失败')
          }
        })
      }
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  @import '../../static/css/header.css';
</style>
